<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<style>
  html, body {
    padding: 0;
    margin: 0;
  }

  .playWnd {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
  }

  /*.operate {*/
  /*  margin-top: 24px;*/
  /*}*/

  /*.operate::after {*/
  /*  content: '';*/
  /*  display: block;*/
  /*  clear: both;*/
  /*}*/

  /*.module {*/
  /*  float: left;*/
  /*  width: 340px;*/
  /*  !*min-height: 320px;*!*/
  /*  margin-left: 16px;*/
  /*  padding: 16px 8px;*/
  /*  box-sizing: border-box;*/
  /*  border: 1px solid #e5e5e5;*/
  /*}*/

  /*.module .item {*/
  /*  margin-bottom: 4px;*/
  /*}*/

  /*.module input[type="text"] {*/
  /*  box-sizing: border-box;*/
  /*  display: inline-block;*/
  /*  vertical-align: middle;*/
  /*  margin-left: 0;*/
  /*  width: 150px;*/
  /*  min-height: 20px;*/
  /*}*/

  /*.module .btn {*/
  /*  min-width: 80px;*/
  /*  min-height: 24px;*/
  /*  margin-top: 100px;*/
  /*  margin-left: 80px;*/
  /*}*/
</style>

<body>
<!--预览界面-->
<!--<div id="operate" class="operate">-->
<!--  <div class="module">-->
<!--    <div class="item"><span class="label">监控点编号：</span><input id="cameraIndexCode" type="text" value=""></div>-->
<!--    <div class="item" style="margin-top: 20px;margin-left: -20px;">-->
<!--      <button style="width:20px;padding:0;margin:0;" id="startPreview" class="btn">预览</button>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->
<!--视频窗口展示-->
<div id="playWnd" class="playWnd"></div>
</body>

<!--三个必要的js文件引入-->
<script src="../jquery-1.12.4.min.js"></script>
<script src="../jsencrypt.min.js"></script>            <!-- 用于RSA加密 -->
<script src="../jsWebControl-1.0.0.min.js"></script>   <!-- 用于前端与插件交互 -->

<script type="text/javascript">

  const videoParams = [
    '16172ca4c7474ea38787bd2606e04b69',
    'ffda4d6bf942461a8cad49a604c97fd0',
    '42a96254555546f69354b6ef4ad21ccb',
    '876c38a9e5eb4457a906f63bfc282e3a',
    '5ae60530eb3d42eabf3d5fb8703f355f',
    '975830a2b60d4132b02661b6f539ddaf'
  ]

  const ALL = [
    '73d20014b551464288a874403473073d',
    '113aa2d222cd4fd4bfab27ce54f60205',
    'b48f2563a4784b24bdc30c1dc1da904e',
    '5d4f0f1b895b4475a1ded0868f8e19b7',
    '1466dfa1cbb6409c8fb8402ea715cc14',
    'dba0d25c54544c24aa2357f5f2969fb7',
    'b088f509bc34466b8ea3c0dffe5a93a7',
    'ab3de22d64b04458a0828470b89c0512',
    '9537e1e41ebf4ecd9059091414a7d44c',
    '8c546612e24743598241f0ee9bca5afd',
    'eb92de924bda4a798aef2756815b3a6c',
    '58bb72d6711a4c6cba813ff1c87a2358',
    'edb9be539db14556ac03c0a285534931',
    '81093b609e49492289ddc0d5f030a2d0',
    '36387acefbc14a9bb56a02e8d5aba1f8',
    'c2efd415cf0f4710b11fec8cff9e79b9',
    '51ec250f0371456faabacf3504e93546',
    'b45068388cfc4faba3e6d9923c98a761',
    'ef5bcc6ddaf2489daf874a1e9f4ce69c',
    '7eb7930c9e6543c3bdda012c9854d061',
    'b9202a0eadce45cd88fc3277d45ba110',
    'f0be41423b9e40eb9d620bb06d8f0de7',
    '3781cd9e09d941e582ab5ad02d49d867',
    '7084aa0c40664d4995806305918dd64a',
    'db636140c45c4f42a9f5ec29b4454811',
    '1f66318c1bd7472eb24a18f0dee0b386',
    '975830a2b60d4132b02661b6f539ddaf',
    'ba682a59afe340d4b363193d1a6cc2b0',
    '3efbfca1c1d44aba8036972634feba95',
    '390ca6e8a4f349fc86d7633763ebbb3e',
    'fff639b009a941ff97629302907b6745',
    '4b1ed15f6c724eed8fbbfc4ee78aaff8',
    '1f9eafc8fdfc404b850ac9f236b46f47',
    'b74d4beafce34bd987f1d4ef21ff1d4d',
    'bf49fe2d31a74092ae0f5892d1126ea7',
    'f57447d429ad413595b9ad47214c386e',
    'e424947930dc48d996d0ae2c27d718fa',
    '7dd462c6f5544e69a85a3ee0c03964d1',
    '41c3e0a4bdf5468abe9b53235b58feb3',
    '8f8014ec487c4828913c6e014d0c3134',
    'f645134419064044a7ed24ce4524ae44',
    '16172ca4c7474ea38787bd2606e04b69',
    'ffda4d6bf942461a8cad49a604c97fd0',
    'dfba6e13609146f3904ece0ac371495d',
    '6105340ef5354c6aae86846cdfd6e903',
    '5e7b6dc6711a43a198b805bc643c365c',
    'c492bcf38abb4d5e930033a64f9b0fc2',
    '5e94c07aa6354423a9885e1dfa9334b8',
    '25b2e0adae0e48ee8e3e21394580c787',
    '3d5155a5bec145959f0fcaa3bf41377b',
    'bfb66788ecb144dda138624a74bdf722',
    '944afd9364384b04a27a977511c94e44',
    '5e3e8cdb3c794f19ad8ca07f9e6cff9e',
    '3489153fe7804149ab0e9b6f357bf02c',
    '710079a2aa8d4ae28e2dee0af99620d6',
    '7dadc04e409f48479c6ab8f3091052fe',
    '42a96254555546f69354b6ef4ad21ccb',
    '5ae60530eb3d42eabf3d5fb8703f355f',
    '876c38a9e5eb4457a906f63bfc282e3a',
    'afbd180b6c104ce2bb7a7ae53eebb4e5',
    'b09db8412bab4acab214aacb48ce6b22',
    '944fd561154f47f894985a581d005875',
    '4625822b2dde4d8889d382dfd691a6fc',
    '6de6e5113de444d09afeee0efeba779e',
    'b7aa459b2df24edda44adc568cee670d',
    '1d39fb6c20e4423f9e52c133c858009a',
    '820bb1e8ead949679a0d0b3bd7655e32',
    '70d4c6ff66904cf0ba1061044842437f',
    'fa4929f2fdc24a65951f2504a365cd9e',
    'd1c7598fb0f94329ae7975b2d5d530c0',
    'e1a54bee80cd4165a2fc4240f1c1bac9',
    '331d57adef1a4c88af2faa271f30f062',
    '63208b5ec5f748dfa7abe29e459b09ed',
    '3a7a0d049d294686bddfeff1bc8b7dde',
    'f31a9cb8735c4e7f9851c0ca8afb6ab3',
    '117913c5ffd544d19c0bab3405e2fd3f',
    '5036c6d1d2044b00add56e2c59eb9d27',
    '899cdd8b3b2a427ea7922c3dcebe5ac0',
    '83625924d8464f60b6f4b0dc5145258e',
    '61222556a6a4425b846ce5a45248a89a',
    '912fee511f944d9faeb3fa0076565c55',
    '328818dd94884843a1677db990ccfcb4',
    'e6dd0729438241a1bc5d2d7e0015ba46',
    'b8a702bf0c3f4bf2812eac11669f6700',
    '92ce412c473641b4bcb2198c6c1a1b66',
    'f6fccb2a8264415e8cd7c2dd128b2f9c',
    'dc35ce198b124f489d9278bed63c38ba',
    'f0aa2373544441288c9fd4d328e79189'
  ]

  const interval = 1000 * 60

  //页面加载时创建播放实例初始化
  let container
  let containerHeight
  let containerWidth
  $(window).load(function() {
    container = $('#playWnd')
    containerHeight = container.height()
    containerWidth = container.width()
    registerEvent()
    initPlugin()
  })

  //声明公用变量
  var initCount = 0
  var pubKey = ''

  // 创建播放实例
  function initPlugin() {
    oWebControl = new WebControl({
      szPluginContainer: 'playWnd',                       // 指定容器id
      iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
      iServicePortEnd: 15909,
      szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',   // 用于IE10使用ActiveX的clsid
      cbConnectSuccess: function() {                     // 创建WebControl实例成功
        oWebControl.JS_StartService('window', {         // WebControl实例创建成功后需要启动服务
          dllPath: './VideoPluginConnect.dll'         // 值"./VideoPluginConnect.dll"写死
        }).then(function() {                           // 启动插件服务成功
          // oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
          //   cbIntegrationCallBack: cbIntegrationCallBack
          // })
          oWebControl.JS_CreateWnd('playWnd', containerWidth, containerHeight)
            .then(function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
              init()  // 创建播放实例成功后初始化
            })
        }, function() { // 启动插件服务失败
        })
      }
      // cbConnectError: function() { // 创建WebControl实例失败
      //   oWebControl = null
      //   $('#playWnd').html('插件未启动，正在尝试启动，请稍候...')
      //   WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
      //   initCount++
      //   if (initCount < 3) {
      //     setTimeout(function() {
      //       initPlugin()
      //     }, 3000)
      //   } else {
      //     $('#playWnd').html('插件启动失败，请检查插件是否安装！')
      //   }
      // },
      // cbConnectClose: function(bNormalClose) {
      //   // 异常断开：bNormalClose = false
      //   // JS_Disconnect正常断开：bNormalClose = true
      //   console.log('cbConnectClose')
      //   oWebControl = null
      // }
    })
  }

  // 设置窗口控制回调
  function setCallbacks() {
    oWebControl.JS_SetWindowControlCallback({
      cbIntegrationCallBack: cbIntegrationCallBack
    })
  }

  // 推送消息
  // function cbIntegrationCallBack(oData) {
  //   showCBInfo(JSON.stringify(oData.responseMsg))
  // }

  //初始化
  function init() {
    getPubKey(function() {

      ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
      var appkey = '24427585'                           //综合安防管理平台提供的appkey，必填
      var secret = setEncrypt('sPnzwNnpcBcIL2jkhxmW')   //综合安防管理平台提供的secret，必填
      var ip = '10.18.201.207'                           //综合安防管理平台IP地址，必填
      var playMode = 0                                  //初始播放模式：0-预览，1-回放
      var port = 443                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
      var snapDir = 'D:\\SnapDir'                       //抓图存储路径
      var videoDir = 'D:\\VideoDir'                     //紧急录像或录像剪辑存储路径
      var layout = '1x1'                                //playMode指定模式的布局
      var enableHTTPS = 1                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
      var encryptedFields = 'secret'					   //加密字段，默认加密领域为secret
      var showToolbar = 0                               //是否显示工具栏，0-不显示，非0-显示
      var showSmart = 1                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
      var buttonIDs = ''  //自定义工具条按钮
      ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////

      oWebControl.JS_RequestInterface({
        funcName: 'init',
        argument: JSON.stringify({
          appkey: appkey,                            //API网关提供的appkey
          secret: secret,                            //API网关提供的secret
          ip: ip,                                    //API网关IP地址
          playMode: playMode,                        //播放模式（决定显示预览还是回放界面）
          port: port,                                //端口
          snapDir: snapDir,                          //抓图存储路径
          videoDir: videoDir,                        //紧急录像或录像剪辑存储路径
          layout: layout,                            //布局
          enableHTTPS: enableHTTPS,                  //是否启用HTTPS协议
          encryptedFields: encryptedFields,          //加密字段
          showToolbar: showToolbar,                  //是否显示工具栏
          showSmart: showSmart,                      //是否显示智能信息
          buttonIDs: buttonIDs                       //自定义工具条按钮
        })
      }).then(function(oData) {
        oWebControl.JS_Resize(containerWidth, containerHeight)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
        replays()
      })
    })
  }

  // 设置偏移
  function setPos(top, left) {
    oWebControl.JS_SetDocOffset({
      left: left,
      top: top
    })  // 更新插件窗口位置
  }

  //获取公钥
  function getPubKey(callback) {
    oWebControl.JS_RequestInterface({
      funcName: 'getRSAPubKey',
      argument: JSON.stringify({
        keyLength: 1024
      })
    }).then(function(oData) {
      console.log(oData)
      if (oData.responseMsg.data) {
        pubKey = oData.responseMsg.data
        callback()
      }
    })
  }

  //RSA加密
  function setEncrypt(value) {
    var encrypt = new JSEncrypt()
    encrypt.setPublicKey(pubKey)
    return encrypt.encrypt(value)
  }

  // 注册事件
  function registerEvent() {
    $(window).on('resize', function() {
      containerHeight = container.height()
      containerWidth = container.width()
      oWebControl.JS_Resize(containerWidth, containerHeight)
    })
  }

  //
  function replays() {
    let index = getRandomInt(videoParams.length - 1)
    let param = videoParams[index]
    preview(param)
    setTimeout(replays, interval)
  }

  // 获取随机数
  function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max))
  }

  // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
  // $(window).resize(function() {
  //   if (oWebControl != null) {
  //     // oWebControl.JS_Resize(1000, 600)
  //     setWndCover()
  //   }
  // })

  // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
  // $(window).scroll(function() {
  //   if (oWebControl != null) {
  //     // oWebControl.JS_Resize(1000, 600)
  //     setWndCover()
  //   }
  // })

  // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
  // function setWndCover() {
  //   var iWidth = $(window).width()
  //   var iHeight = $(window).height()
  //   var oDivRect = $('#playWnd').get(0).getBoundingClientRect()
  //
  //   var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0
  //   var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0
  //   var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0
  //   var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0
  //
  //   iCoverLeft = (iCoverLeft > 1000) ? 1000 : iCoverLeft
  //   iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop
  //   iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight
  //   iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom
  //
  //   oWebControl.JS_RepairPartWindow(0, 0, 1001, 600)    // 多1个像素点防止还原后边界缺失一个像素条
  //   if (iCoverLeft != 0) {
  //     oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600)
  //   }
  //   if (iCoverTop != 0) {
  //     oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop)    // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
  //   }
  //   if (iCoverRight != 0) {
  //     oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600)
  //   }
  //   if (iCoverBottom != 0) {
  //     oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom)
  //   }
  // }

  function preview(videoNum) {
    let cameraIndexCode = videoNum     //获取输入的监控点编号值，必填
    let streamMode = 0                                     //主子码流标识：0-主码流，1-子码流
    let transMode = 1                                      //传输协议：0-UDP，1-TCP
    let gpuMode = 0                                        //是否启用GPU硬解，0-不启用，1-启用
    let wndId = -1                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）
    cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
    cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')

    oWebControl.JS_RequestInterface({
      funcName: 'startPreview',
      argument: JSON.stringify({
        cameraIndexCode: cameraIndexCode,                //监控点编号
        streamMode: streamMode,                         //主子码流标识
        transMode: transMode,                           //传输协议
        gpuMode: gpuMode,                               //是否开启GPU硬解
        wndId: wndId                                     //可指定播放窗口
      })
    })
  }

  // //视频预览功能
  // $('#startPreview').click(function() {
  //   var cameraIndexCode = $('#cameraIndexCode').val()     //获取输入的监控点编号值，必填
  //   var streamMode = 0                                     //主子码流标识：0-主码流，1-子码流
  //   var transMode = 1                                      //传输协议：0-UDP，1-TCP
  //   var gpuMode = 0                                        //是否启用GPU硬解，0-不启用，1-启用
  //   var wndId = -1                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）
  //
  //   cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
  //   cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')
  //
  //   oWebControl.JS_RequestInterface({
  //     funcName: 'startPreview',
  //     argument: JSON.stringify({
  //       cameraIndexCode: cameraIndexCode,                //监控点编号
  //       streamMode: streamMode,                         //主子码流标识
  //       transMode: transMode,                           //传输协议
  //       gpuMode: gpuMode,                               //是否开启GPU硬解
  //       wndId: wndId                                     //可指定播放窗口
  //     })
  //   })
  // })

  // 标签关闭
  // $(window).unload(function() {
  //   if (oWebControl != null) {
  //     oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
  //     oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
  //       },
  //       function() {  // 断开与插件服务连接失败
  //       })
  //   }
  // })

</script>
</html>
